<template>
	<div class="bindJD-main bindTb">
		<div class="bindJD-msg">
			<div class="bindJD-msg-box">
				<!-- notice -->
				<div class="bindJD-notice">
					<a><img src="static/imgs/zhuyi.png" alt="" title=""/></a>
					<a>注意事项</a>
				</div>
				<!-- list -->
				<div class="bindJD-list">
					<p>请注意:</p>
					<p>1.输入淘宝用户名.注意不是昵称</p>
					<p>2.请确保收货地址和收货联系人真实具体，并保证和淘宝上下单的收货地址信息一致</p>
					<p>3.请确认多个淘宝号之间使用不同的收货信息(收货姓名,地址和电话均不同)</p>
					<p>4.账号审核人工进行,正常一个工作日内完成,只有审核通过的买号才能接受任务</p>
				</div>
			</div>
		</div>
		<!-- from -->
    <div class="check-status">审核状态： <span class="check-status-color">{{submit.approveString}}<span v-if="submit.approve===2">（{{submit.approveReason}}）</span></span></div>
		<div class="bindJD-from clearfix">
			<div class="bindJD-from-ul">
				<ul>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">淘宝账户:</div>
							<div class="bindJD-from-ul-right"><input type="text" placeholder="请输入淘宝账户" v-model="submit.acount"/></div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">淘宝账户等级:</div>
							<div class="bindJD-from-ul-right">
                <select style="border:1px solid #e6e6e6;outline:none;" v-model="submit.acountLevel" @click="levelChange">
                  <option :key="index" v-for="(item,index) in level" :value="item.value">{{item.label}}</option>
                </select>
              </div>
						</div>
					</li>
					<li v-if="false">
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">淘气值:</div>
							<div class="bindJD-from-ul-right"><input type="text" placeholder="请输入账号淘气值"/></div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">是否开通花呗:</div>
							<div class="bindJD-from-ul-right">
                <mt-radio flex="dir:left"
                 v-model="submit.baitiaoStart"
                :options="baitiao">
              </mt-radio></div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">收货人:</div>
							<div class="bindJD-from-ul-right"><input type="text" placeholder="请输入收货人姓名" v-model.trim="submit.receiver"/></div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">手机号:</div>
							<div class="bindJD-from-ul-right"><input type="text" placeholder="请输入收货人手机号" v-model.trim="submit.receiveMobile"/></div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">收货省份:</div>
							<div class="bindJD-from-ul-right" >
								<select style="border:1px solid #e6e6e6;outline:none;" @change="provinceChange" v-model="submit.receiveProvince">
									<option v-for="item in area" :value="item.name">{{item.name}}</option>
								</select>
							</div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">收货城市:</div>
							<div class="bindJD-from-ul-right">
								<select style="border:1px solid #e6e6e6;outline:none;" @change="cityChange" v-model="submit.receiveCity">
									<option v-for="item in cityOption" :value="item.name">{{item.name}}</option>
								</select>
							</div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">收货地区:</div>
							<div class="bindJD-from-ul-right">
								<select style="border:1px solid #e6e6e6;outline:none;" @change="areaChange" v-model="submit.receiveCountry">
                  <option v-for="item in areaOption" :value="item">{{item}}</option>
								</select>
							</div>
						</div>
					</li>
					<li>
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">详细地址:</div>
							<div class="bindJD-from-ul-right"><input type="text" placeholder="请输入详细地址" v-model="submit.receiveAddress"/></div>
						</div>
					</li>
					<li v-if="false">
						<div class="bindJD-from-ul-cen">
							<div class="bindJD-from-ul-left">标签:</div>
							<div class="bindJD-from-ul-right"><input type="text" placeholder="自动匹配标签" disabled="disabled"/></div>
						</div>
					</li>
				</ul>
			</div>
			<!-- upImg -->
			<div class="bindJD-from-upImg">
				<h4>上传图片</h4>
				<div class="from-upImg-ul">
					<ul>
						<li>
							<div class="from-upImg-box">
								<div class="upImg-box-img">
									<img :src="submit.myacountImg?imgUrl(submit.myacountImg):'static/imgs/addtupian.png'" alt="" title=""/>
								</div>
								<p>我的账户</p>
							</div>
              <input type="file" @change="upload(arguments,'myacountImg')"/>
						</li>
						<li>
							<div class="from-upImg-box">
								<div class="upImg-box-img">
									<img :src="submit.mysiteImg?imgUrl(submit.mysiteImg):'static/imgs/addtupian.png'" alt="" title=""/>
								</div>
								<p>我的主页</p>
							</div>
              <input type="file" @change="upload(arguments,'mysiteImg')"/>
						</li>
						<li>
							<div class="from-upImg-box">
								<div class="upImg-box-img">
									<img :src="submit.baitiaoImg?imgUrl(submit.baitiaoImg):'static/imgs/addtupian.png'" alt="" title=""/>
								</div>
								<p>开通花呗情况</p>
							</div>
              <input type="file" @change="upload(arguments,'baitiaoImg')"/>
						</li>
						<li v-if="false">
							<div class="from-upImg-box">
								<div class="upImg-box-img">
									<img src="static/imgs/addtupian01.png" alt="" title=""/>
								</div>
								<p>淘气值截图</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- look-link -->
    <router-link :to="{name:'viewPicBind'}">
		  <div class="bindJD-look">查看图片绑定示例</div>
    </router-link>
		<div class="bindJD-notice-msg">未通过审核的账号信息,可以直接修改提交</div>
		<div class="bindJD-btn" @click="submitInfo" v-if="submit.approve!==0">提交审核</div>
	</div>
</template>


<script>
  import baseMixins from '../../mixins/base'
  import bindAccount from '../../mixins/bindAccount'
  import {mapGetters,mapActions} from 'vuex'
	export default{
		name:'bindTaoBao',
    data(){
		  return {
		    name:'淘宝',
        level:[
          {
            label:'一心',
            value:'0'
          },{
            label:'二心',
            value:'1'
          },{
            label:'三心',
            value:'2'
          },{
            label:'四心',
            value:'3'
          },{
            label:'五心',
            value:'4'
          },{
            label:'一钻',
            value:'5'
          },{
            label:'二钻',
            value:'6'
          },{
            label:'三钻',
            value:'7'
          },{
            label:'四钻',
            value:'8'
          },{
            label:'五钻',
            value:'9'
          }
        ],
      }
    },
    computed:{
      ...mapGetters(['user'])
    },
    watch:{
      'user.taobaoList':{
        immediate:true,
        handler(newVal){
          newVal.map((item)=>{
            if(!this.controllers[item.id]){
              this.$set(this.controllers,item.id,true)
            }
          })
        },
      },
    },
    mixins:[baseMixins,bindAccount],
    created() {
      this.initData()
    }
	}
</script>
<style lang="stylus">
  .bindTb
    .mint-radiolist
      height 0.42rem
      .mint-cell
        min-height 0.42rem
        height 0.42rem
      .mint-cell:last-child
        background-image none
      .mint-radio-core
        width 0.2rem
        height 0.2rem
      .mint-radio-core:after
        width 0.08rem
        height 0.08rem
        top:0.05rem
        left 0.05rem
      .mint-radio-label
        font-size 0.15rem
</style>
<style lang="less" scoped>
  .bindJD-main{
    width: 100%;
    height: 100%;

    padding-bottom: 0.6rem;
  }
  .bindJD-msg{
    width: 100%;
    height: auto;
    background: white;
    padding-bottom: 0.05rem;
  }
  .bindJD-msg-box{
    width: 94%;
    margin: 0 auto;
  }
  .bindJD-notice{
    width: 100%;
    height: 0.35rem;
    line-height: 0.35rem;
  }
  .bindJD-notice a{
    display:inline-block;
    float:left;
    color: #333;
    font-size: 0.14rem;
  }
  .bindJD-notice a:first-child{
    width: 0.15rem;
    height: 0.15rem;
    margin: 0.1rem 0.05rem 0 0;
  }
  .bindJD-notice a:first-child img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .bindJD-list{
    width: 100%;
    height: 100%;
  }
  .bindJD-list p{
    width: 100%;
    color: #777;
    font-size: 0.12rem;
    line-height: 0.2rem;
    padding-bottom: 0.05rem;
  }
  .bindJD-from{
    width: 100%;
    height: auto;
    margin-top: 0.1rem;
  }
  .bindJD-from-ul{
    width: 100%;
    height: auto;
  }
  .bindJD-from-ul ul li{
    width: 100%;
    height: 0.42rem;
    position: relative;
    float:left;
    background: white;
    border-bottom: 0.01rem solid #e6e6e6;
  }

  .bindJD-from-ul-cen{
    width: 90%;
    margin: 0 auto;
  }
  .bindJD-from-ul-left{
    float: left;
    line-height: 0.42rem;
    color: #333;
    font-size: 0.13rem;
  }
  .bindJD-from-ul-right{
    float:left;
  }
  .bindJD-from-ul-right input{
    width: 2rem;
    padding: 0.14rem 0 0.14rem 0.1rem;
    font-size: 0.13rem;
    float:left;
  }
  .bindJD-from-ul-right select{
    float: left;
    width: 1.5rem;
    height: 0.25rem;
    font-size: 0.14rem;
    box-sizing: border-box;
    margin: 0.1rem 0 0 0.13rem;
  }
  .bindJD-from-upImg{
    width: 100%;
    height: auto;
    float: left;
    background: white;
  }
  .bindJD-from-upImg h4{
    width: 90%;
    margin: 0.1rem auto 0 auto;
    font-weight: inherit;
    color: #333;
    font-size: 0.13rem;
  }
  .from-upImg-ul{
    width: 100%;
    height: auto;
    margin-top: 0.15rem;
  }
  .from-upImg-ul ul{
    width: 90%;

    margin: 0 auto;
  }
  .from-upImg-ul  li input{
    position: absolute;
    width: 100%;
    height: 0.96rem;
    background: transparent;
    opacity: 0;
    top:0;
    left:0
  }
  .from-upImg-ul ul li{
    width: 50%;
    position: relative;
    float: left;
    height: 0.96rem;
    float: left;
  }
  .from-upImg-box{
    width: 50%;
    margin: 0 auto;
  }
  .upImg-box-img{
    width: 0.64rem;
    height: 0.64rem;
  }
  .upImg-box-img img{
    width: 100%;
    height: 100%;
    display: block;
  }
  .from-upImg-box p{
    color: #333;
    font-size: 0.12rem;
    margin-top: 0.05rem;
  }
  .bindJD-look{
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    background: white;
    text-align: center;
    color: #0c92f3;
    font-size: 0.12rem;
    margin: 0.1rem 0;
  }
  .bindJD-notice-msg{
    text-align: center;
    color: #4097FF;
    font-size: 0.12rem;
    margin-bottom: 0.1rem;
    overflow: hidden;
  }
  .bindJD-btn{
    width: 90%;
    margin: 0 auto;
    background: rgb(142,10,190);
    height: 0.33rem;
    line-height: 0.33rem;
    text-align: center;
    color: white;
    font-size: 0.12rem;
    border-radius: 0.05rem;
  }
  .bankMain-yes-main .bind-Jd-right-color{
    float:right;
    color: #0C92F3;
    font-size: 0.14rem;
  }

  .bindJD-main {
    .check-status {
      margin-top: 0.2rem;
      text-align: center;
      font-size: 0.2rem;
      .check-status-color {
        color: red;
      }
    }
  }
</style>
<style lang="stylus" scoped>
  @import "../../assets/stylus/bind.styl"
</style>
